<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
   <canvas id="canvas" width="500" height="500" style="border:1px solid #ccc;"></canvas>
</body>
</html>

<script type="text/javascript">
	var canvas = document.getElementById('canvas');
	var context = canvas.getContext('2d');
	var image = new Image()
	image.src = 'images/zhongqiu.png';
	image.onload=function() {
		context.drawImage(image,10,10,250,250);
		context.drawImage(image,330,200,320,300,210,210,200,200) //前面的30,30,是对角线的剪切区域，130,130是剪切，后面的210,210是横纵坐标
	}
</script>